<template>
    <div class="searchwrapper">
        <!-- 搜索框 -->
        <form action="/">
            <van-search v-model="value" placeholder="请输入搜索关键词" show-action @search="onSearch" @cancel="onCancel" />
        </form>
        <!-- 建议商品 -->
        <div class="suggestion">
            <div class="head">
                <h3 class="tit">热门搜索</h3>
            </div>
            <div class="nav">
                <a href="">巧克力</a>
                <a href="">宾利</a>
                <a href="">蛋糕</a>
                <a href="">巧克力</a>
                <a href="">宾利</a>
                <a href="">蛋糕</a>
                <a href="">巧克力</a>
                <a href="">宾利</a>
                <a href="">蛋糕</a>
            </div>
        </div>
    </div>
</template>
<script setup lang='ts'>

</script>
 
<style lang="less" >
.searchwrapper {
    .suggestion {
        margin: 0 15px 15px 15px;
        .head{
            font-size: 14px;
            color: #999999;
            display: flex;
        }
        .nav {
            a {
                float: left;
                font-size: 12px;
                margin: 0 16px 16px 0;
                padding: 0 7.5px;
                border-radius: 4px;
                line-height: 24.6px;
                height: 24.6px;
                border: 1px solid black;
                color: black;
            }

        }
    }
}
</style>
